<template>
<div class="order">
    <Header><span slot="back" class="back" @click="goback" >返回</span>
    <span slot="home" class="home" @click="gohome">首页</span></Header>
    <div v-if="orderlist.length>0">
        <div v-for="item in orderlist" :key="item._id" class="order-list">
            <div class="checked"> 
                <input type="checkbox" v-model="checkedmodel" :value="item._id">
            </div>
            <div class="content">
                <van-swipe-cell>
                    <p>收货人:{{item.receiver}}</p>
                    <p>收货地址：{{item.regions}}{{item.address}}</p>
                    <template #right>
                        <van-button square text="查看详情" @click="goorderdetail(item._id)" type="danger" class="delete-button" />
                        <van-button square text="删除" @click="delorder(item._id)" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
                <!-- <button @click="goorderdetail(item._id)">查看详情</button> -->
                <!-- <button @click="delorder(item._id)">删除订单</button> -->
                <!-- <van-button type="info" @click="delorder(item._id)" class="btn">删除订单</van-button> -->
                <div v-if="item.isPayed">已支付</div>
                <div v-else>未支付</div>
            </div>
        </div>
        <!-- <van-button type="info" @click="Delorders" color="red" class="btn">删除</van-button> -->
        <!-- <button @click="Delorders">删除</button>
        <button>支付</button> -->
        <!-- <van-button type="info" class="btn">支付</van-button> -->
        <div style="height:50px"></div>
        <van-goods-action>
            <van-goods-action-button type="warning" @click="Delorders" text="删除订单" />
            <van-goods-action-button type="danger" text="立即支付" />
        </van-goods-action>
    </div>
    <div v-else>
        <van-empty description="还没有订单哟" />
    </div>
</div>
</template>
<script>
import Header from "../../components/HeaderOrder";
import {reqGetorder,reqDelorder,reqDelorders} from "../../api/reqgetorder";
import { Toast } from "vant";
export default {
data() {
return {
    orderlist:[],
    orderdatail:[],
    checkedmodel:[]
};
},
computed: {},
watch: {},
methods: {
    async initorder(){
        const result = await reqGetorder();
        this.orderlist = result.orders;
        console.log(result);
    },
    goorderdetail(id){
        this.$router.push("/orderdetail/"+id);
    },
    goback(){
        this.$router.back();
    },
    gohome(){
        this.$router.push("/home");
    },
    async delorder(id){
        const result = await reqDelorder(id);
        console.log(result);
        this.initorder();
    },
    async Delorders(){
        if(this.checkedmodel.length>0){
            const result = await reqDelorders(this.checkedmodel);
            console.log(result);
            this.initorder();
        }
        else{
            Toast("请选择要删除的订单")
        }
    },
},
created() {
    this.initorder();
    },
mounted() {},
components: {
    Header,
},
};
</script>
<style scoped>
.order-list{
    border: 1px solid #ccc;
    margin-bottom: 10px;
    display: flex;
  height: 140px;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
}
input{
    zoom:180%;
}
.content{
    flex: 1;
}
.btn{
    margin-left: 20px;
}
.delete-button {
    height: 100%;
  }
</style>